<template>
  <el-table :data="setmealDishes" style="width: 100%">
    <el-table-column prop="name" label="名称" width="180" align="center" />
    <el-table-column prop="price" label="原价" width="180" align="center">
      <template #default="{ row }">
        {{ decimalsReplenish(row.price) }}
      </template>
    </el-table-column>
    <el-table-column prop="copies" label="份数" align="center">
      <template #default="{ row }">
        <el-input-number v-model="row.copies" size="small" :min="1" :max="99" label="描述文字" />
      </template>
    </el-table-column>
    <el-table-column label="操作" width="180px;" align="center">
      <template #default="{ row }">
        <el-button type="danger" size="small" @click="delHandle(row.id)"> 删除 </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup lang="ts">
import { decimalsReplenish } from '@/utils/index'
import { ref, watch } from 'vue'
const props = defineProps({
  setmeal_dishes: {
    type: Array,
    default: [],
  },
})
const emit = defineEmits(['delDishHandle'])
const setmealDishes = ref(props.setmeal_dishes)
// console.log(setmealDishes.value)
watch(
  () => props.setmeal_dishes,
  newVal => {
    setmealDishes.value = newVal
  },
  { deep: true },
)
// 删除菜品
const delHandle = (id: number) => {
  emit('delDishHandle', id)
}
</script>
<style scoped></style>
